<!--
	作者：ZhangXin
	时间：2020-07-25
	描述：博客注册页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
    <title>注册</title>
</head>
<body>

<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        新用户注册
                    </div>
                </h2>
                <div class="ui large form" >
                    <div class="ui  segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" id="username" name="username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" id="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" id="confirmpassword" name="confirmpassword" placeholder="确认密码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" id="email" name="email" placeholder="邮箱" style="margin-right: 1.5em;">
                                <input type="button" id="getcode" class="ui blue label" value="获取验证码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="check square outline icon"></i>
                                <input type="text" name="identify" id="identify" placeholder="验证码">
                            </div>
                        </div>
                        <div class="field">
                            <div style="text-align: left">
                                <a href="#" th:href="@{/login}">点击登录</a>
                            </div>
                        </div>
                        <button type="button" class="ui fluid large teal submit  button" id="register-btn" >注 册</button>
                    </div>

                    <div class="ui error mini message"></div>
                    <div class="ui mini negative message" id="errormessage" style="display: none">
                        用户名和密码错误
                    </div>
                    <div class="ui mini success message" id="successmessage" style="display: none">
                       注册成功
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>
    $('.ui.form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [{
                    type: 'empty',
                    prompt: '请输入用户名'
                }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: 'empty',
                    prompt: '请输入密码'
                }]
            },
			confirmpassword: {
                identifier: 'confirmpassword',
                rules: [{
                    type: 'empty',
                    prompt: '请输入确认密码'
                }]
            },
			mail: {
				identifier: 'mail',
				rules: [{
					type: 'email',
					prompt: '请输入正确邮箱'
				}]
			},
            identify: {
                identifier: 'identify',
                rules: [{
                    type: 'empty',
                    prompt: '请输入验证码'
                }]
            }
        }
    });

	$('#getcode').click(function(){

		//发送验证码
		var email = $("#email").val();
		if(email==""){
			alert("邮箱不能为空");
			return;
		}else if(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email) == false){
            alert("邮箱格式不正确！");
            return;
        }
		alert("验证码已发送，请及时查看你的邮箱");
		$(".code").toggle();
		//ajax实现后台邮箱的发送
		$.ajax({
			//url路径
			url: "/sendEmail",
			//data请求数据
			data: {"email": email},
			//dataType json
			type: "post",
			//回调函数
			success: function (data) {
				//回调函数 data 返回流
				if (data == "failure") {
					alert("发送失败");
				}
				else if (data=="false"){
					alert("目标邮箱不存在，请检查你的邮箱是否正确");
				}
				//  else{

				// }
			}
		});

	});

	$("#register-btn").click(function () {
	    var username = $("#username").val();
        var password = $("#password").val();
        var confirmpassword = $("#confirmpassword").val();
        var email = $("#email").val();
        var identify = $("#identify").val();

        $.ajax({
            "url": "/register",    //reg是注册接口
            type:'POST',
            data:{"username":username,
                "password":password,
                "confirmpassword":confirmpassword,
                "email":email,
                "identify":identify},
            success: function (result) {
                if (result=="成功") {
                  $("#successmessage").css("display","inline");
                  $("#successmessage").text("你已经注册成功，请前往登录界面！");
                  $("#errormessage").css("display","none");
                } else {
                    $("#errormessage").css("display","inline");
                    $("#errormessage").text(result);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log('XMLHttpRequest:');
                console.log(XMLHttpRequest);
                alert('网络异常！尝试刷新网页解决问题')
            }


        });
    });
</script>
</body>

</html>